// 类组件
import React, { Component } from 'react'
// Route 定义路由规则所用
// Link/NavLink 声明式导航  NavLink它有激活样式  统一编译出来的html都为a标签
import { Route, Link, NavLink } from 'react-router-dom'

// 引入需要渲染的组件
import Home from './views/Home'
import About from './views/About'

class App extends Component {
  render() {
    return (
      <div>
        <ul>
          <li>
            {/* 
              to string | object 路由跳转到的地址
              exact 严格匹配
            */}
            {/* <Link to="/home">home</Link> */}
            {/* seach字符串 */}
            {/* <Link to="/home?id=1000">home</Link> */}
            {/* 对象的方式，此写法一般不常用，只有在隐式传参数的时候可能会用到它， */}
            <Link to={{ pathname: '/home', search: 'id=2000' }}>home</Link>
          </li>
          <li>
            {/* <Link to="/about">about</Link> */}
            {/* 
              它有激活样式  当前地址栏中的地址和to属性一样时，则默认会有一个class名称为active,当然你可以修改
              activeClassName 如果使用此属性，则自定义激活样式名称，一般情况下不建议去修改
            */}
            {/* <NavLink to="/about" activeClassName='currentActive'>about</NavLink> */}
            {/* <NavLink to="/about?name=lisi" activeClassName="currentActive"> */}
            <NavLink to={{ pathname: '/about', search: 'name=lisi' }} activeClassName="currentActive">
              about
            </NavLink>
          </li>
        </ul>

        <hr />

        {/* 
        定义路由规则
        path 字符串 路由匹配的路径
        component 路由匹配成功后要渲染的组件 默认用类  
        */}
        <Route path="/home" component={Home} />
        <Route path="/about" component={About} />
      </div>
    )
  }
}

export default App
